import {CnMediumP, CnMediumSpan} from '@/components/text'
import {setStorage} from '@/libs/localstoreage'
import {setSession} from '@/libs/sessionStorage'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'
import {
  SetTemLayout,
  ProgressSetRadioGroupItem,
  ProgressSetCheckBoxGroupItem
} from './components/evaluationProcessComp'

const Kaopinliucheng = defineComponent({
  props: {
    pmGroupProgressList: {
      type: Array as PropType<Evaluation.PmGroupProgress[]>,
      default: []
    }
  },
  emits: {
    'update:pmGroupProgressList': (data: Evaluation.PmGroupProgress[]): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      pmGroupProgressList: Evaluation.PmGroupProgress[]
      processIdx: number
    }>({
      pmGroupProgressList: [],
      processIdx: 0
    })

    const currentProgressByIdx = computed(() =>
      (state.pmGroupProgressList[state.processIdx]?.pmProgressSetList || []).sort(
        (a, b) => a.sort - b.sort
      )
    )

    watch(
      () => props.pmGroupProgressList,
      n => {
        console.log('考评组 流程 获取数据', n)
        state.pmGroupProgressList = n
      },
      {immediate: true}
    )

    watch(
      () => state.pmGroupProgressList,
      n => {
        console.log('考评组 流程 数据变动', n)
        emit('update:pmGroupProgressList', n)
      },
      {deep: true}
    )

    function findSubTitleByPmProgressSetTemList(data: Evaluation.PmGroupProgress) {
      let setTemName = ''

      if (data.pmGroupProgressStatus === 0) {
        return '禁用'
      }
      switch (data.pmGroupStageCode) {
        case '0019':
          return setTemName
        case '0016':
        case '0017':
        case '0018':
        default:
          if (data.pmProgressSetList && data.pmProgressSetList.length) {
            let nameList = (data.pmProgressSetList[0].pmGroupProgressSetList || [])
              .filter(item => item.pmGroupProgressSetValue === '1')
              .map(item => item.pmGroupProgressSetName)
            setTemName = nameList[0] || ''
          }
          return setTemName
      }
    }

    onMounted(() => {})

    return () => (
      <div class='border-1 border-cardLine rounded-6 bg-white'>
        {/* 考核流程卡片标题 */}
        <div class='border-b-1 border-cardLine flex items-center justify-between py-18 px-24 '>
          <CnMediumSpan class='text-16'>考核流程</CnMediumSpan>
        </div>
        {state.pmGroupProgressList.length ? (
          <div class='py-18 px-24'>
            {/* 考核流程*/}
            <div class=' border-b-1 border-infoLight flex items-center gap-x-16 py-24'>
              {/* 流程列表循环渲染 */}
              {state.pmGroupProgressList.map((item, idx) => [
                // 单流程
                <div
                  class={[
                    'w-125 h-60 rounded-4 py-10  flex flex-col items-center justify-center cursor-pointer',
                    state.processIdx === idx ? 'bg-primary' : 'bg-infoLight'
                  ]}
                  onClick={() => {
                    state.processIdx = idx
                    setSession('ecaluationProcess-processIdx', idx)
                  }}
                >
                  {/* 单流程 标题 */}
                  <CnMediumP class={[' text-12', state.processIdx === idx ? 'text-white' : '']}>
                    {item.pmGroupProgressName}
                  </CnMediumP>
                  {/* 单流程 副标题 */}
                  <CnMediumP class={['text-12 mt-8', state.processIdx === idx ? 'text-white' : '']}>
                    {findSubTitleByPmProgressSetTemList(item)}
                  </CnMediumP>
                </div>,
                // 右箭头
                idx !== state.pmGroupProgressList.length - 1 ? (
                  <i class='iconfont icon-youjiantou1 text-infoHalf'></i>
                ) : null
              ])}
            </div>

            {/* 单个考核流程内容 */}
            <div class='py-24'>
              {/* 内容1 */}
              <div>
                {/* 内容1 标题栏 */}
                <div class='flex items-center gap-x-16'>
                  <div class='flex items-center'>
                    <div class='w-4 h-20 bg-primary'></div>
                    <CnMediumSpan class='ml-12'>
                      {state.pmGroupProgressList[state.processIdx]
                        ? state.pmGroupProgressList[state.processIdx].pmGroupProgressName
                        : ''}
                    </CnMediumSpan>
                  </div>
                  {state.pmGroupProgressList[state.processIdx].pmGroupStageCode !== '0016' ? (
                    <a-switch
                      v-model={[
                        state.pmGroupProgressList[state.processIdx].pmGroupProgressStatus,
                        'checked'
                      ]}
                      checkedValue={1}
                      unCheckedValue={0}
                    ></a-switch>
                  ) : null}
                </div>
                {/* 设置区域 */}
                <SetTemLayout>
                  {/* 设置列表 */}
                  {currentProgressByIdx.value.map((item, setIdx) =>
                    item.pmGroupProgressSetTemAdditionalValue === 'radio' ? (
                      <ProgressSetRadioGroupItem
                        name={item.pmGroupProgressSetEngName}
                        v-model={[item, 'progressSet']}
                      ></ProgressSetRadioGroupItem>
                    ) : item.pmGroupProgressSetTemAdditionalValue === 'checkBox' ? (
                      <ProgressSetCheckBoxGroupItem
                        name={item.pmGroupProgressSetEngName}
                        v-model={[item, 'progressSet']}
                      ></ProgressSetCheckBoxGroupItem>
                    ) : null
                  )}
                </SetTemLayout>
              </div>
            </div>
          </div>
        ) : null}
      </div>
    )
  }
})
export default Kaopinliucheng
